<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>基本资料</span>
    </div>
    <div>
      <el-form label-width="80px" v-model="user" size="small" label-position="right">
        <el-form-item label="更换头像" prop="avatar">
          <avatar-upload @refresh-intro="updateAvatarUrl" :userId="user.userId"></avatar-upload>
        </el-form-item>
        <el-form-item label="用户名" prop="userName">
          <el-input  auto-complete="off" v-model="user.userLoginName"></el-input>
        </el-form-item>
        <el-form-item label="用户昵称" prop="nickName">
          <el-input  auto-complete="off" v-model="user.userNickname"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input auto-complete="off" v-model="user.userPhone"></el-input>
        </el-form-item>
        <el-form-item label="用户邮箱" prop="nickName">
          <el-input  auto-complete="off" v-model="user.userEmail"></el-input>
        </el-form-item>
        <el-form-item label="用户技能" >

          <skill-tag @refresh-skill="changeSkillTags" :userSkill="user.userSkill" />

        </el-form-item>
        <el-form-item label="用户状态" prop="nickName">
          {{user.userStatus}}
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" v-on:click="submitUpdate">提交</el-button>
      </div>
    </div>

  </el-card>
</template>

<script>
import {userUpdate} from "@/api/user";
import skillTag from "@/views/profile/components/skillTag";
import AvatarUpload from "@/views/profile/components/avatarUpload";

export default {
  components: {AvatarUpload,skillTag},
  props: {
    user: {
      type: Object,
      default: () => {
        return {
          userId: '',
          userLoginName: '',
          userNickname: '',
          userEmail: '',
          userPhone: '',
          userAvatar: '',
          userPassword: '',
          userStatus: '',
          userLoginIp: '',
          userLoginDate: '',
          userPwdUpdateDate: '',
          userInfoUpdateTime: '',
          userSkill: []
        }
      }
    }
  },
  methods: {
    submitUpdate(){
      // 上传，将数组变为字符串上传
      /* 如果修改了用户名必须重新登录，不然后端JwtAuthenticationFilter 检验token会异常
      *  在这类后端不对每个token验证权限 ，只给admin一个 */
      let params = {
        userId : this.user.userId,
        userLoginName: this.user.userLoginName,
        userNickname: this.user.userNickname,
        userEmail: this.user.userEmail,
        userPhone: this.user.userPhone,
        userAvatar: this.user.userAvatar,
        userStatus: this.user.userStatus,
        userSkill: JSON.stringify(this.user.userSkill)
      };
      userUpdate(params).then(
        res => {
          if (res.code===0) {
            this.$message({
              type: 'success',
              message: '保存成功',
              duration: 5 * 1000
            })

          } else {
            this.$message({
              /*上传失败*/
              type: 'error',
              message: res.msg
            })
          }
        }
      )
    },
    updateAvatarUrl(){
      this.$emit("refresh-intro");
    },
    changeSkillTags(para){
      this.user.userSkill = para;
    }
  }
}
</script>
